$(function () {
    // 首页数据渲染
    // 1. ajax去后台获取用户数据
    // 2. 使用模板引擎渲染数据
    
    var currentPage = 1; // 记录当前页
    var pageSize = 5; // 每页条数

    // 去后台获取数据, 斌渲染方法
    function render () {
        $.ajax({
             type: 'get',
             url: '/user/queryUser',
             data: {
                 page: currentPage,
                 pageSize: pageSize

             },
             dataType: 'json',
             success: function (res) {
                 console.log(res);

                 // 渲染
                 $('tbody').html(template('tmp', res));

                 // res.total 数据库真实数据总数,
                 setPage(res.total) // 调用分页功能,
             }
         })
    }

    render()


    // 3. 禁用启用
    // 1. 点击禁用/启用按钮, 弹出确认框
    // 2. 获取当前数据id
    // 3. 获取当前数据要进行操作(禁用/启用)
    // 4. 如果用户点击确认框, 确认按钮, 向后台发送ajax请求,进行操作
    // 5. 操作完成后,页面从新渲染,隐藏模态框

    var id = null;
    var isDelete = null;
    $('tbody').on('click', '.btn-exec', function () {
        // 获取当前数据id
        id = $(this).parent().data('id');
        // 获取当前数据要进行操作 (禁用/启用)
        isDelete = $(this).hasClass('btn-danger') ? 0 : 1;
         console.log(id, isDelete);
         
    })


    // 4. 如果用户点击确认框 确认按钮,向后台发送ajax请求,进行操作
    // 5. 操作完成后,页面从新渲染,隐藏模态框

    $('.btn-ok').click(function () {
        // 发送ajax请求
        $.ajax({
             type: 'post',
             url: '/user/updateUser',
             data: {
                 id: id,
                 isDelete: isDelete
             },
             dataType: 'json',
             success: function (res) {
                 console.log(res);
                // 页面从新渲染
                 render()
                 // 隐藏模态框
                 $('.modal-user').modal('hide');

             }
         })
    })


    // 4. 分页功能
    // total 数据库数据总数
    function setPage (total) {
        // 使用分页插件 生成分页按钮
        $("#paginator").bootstrapPaginator({
            bootstrapMajorVersion:3,//默认是2，如果是bootstrap3版本，这个参数必填
            currentPage:currentPage,//当前页, 设置当前 高亮的页面小按钮
            // 总数 / 每页的个数 在向上取整
            totalPages: Math.ceil(total / pageSize),//总页数
            size:"small",//设置控件的大小，mini, small, normal,large
            onPageClicked:function(event, originalEvent, type,page){
              //为按钮绑定点击事件 page:当前点击的按钮值
              console.log(page);
            //  改变当前页 取值
            currentPage = page;
            // 页面重新渲染
            render();
            }
      });
      
    }
})